import { Modal } from 'antd';
import { useState, useImperativeHandle, forwardRef } from 'react';

/**
 * 自定Modal组件
 */
export default forwardRef((props, ref) => {
    const { title, children, onOk, onCancel, width, attrs, footer, style, bodyStyle } = props;
    /**
     * 是否打开
     */
    const [open, setOpen] = useState(false);
    /**
     * loading
     */
    const [loading, setLoading] = useState(false);

    useImperativeHandle(ref, () => ({
        show: () => setOpen(true),
        hide: () => setOpen(false),
        start: () => setLoading(true),
        stop: () => setLoading(false)
    }));

    return <Modal
        maskClosable={false}
        destroyOnClose
        title={title}
        open={open}
        onOk={onOk}
        width={width}
        style={style}
        footer={footer}
        bodyStyle={{ paddingTop: 15, ...bodyStyle }}
        confirmLoading={loading}
        {...attrs}
        onCancel={() => {
            setLoading(false);
            setOpen(false);
            onCancel && onCancel();
        }}
    >
        {children}
    </Modal>
});